<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎页</el-breadcrumb-item>
    </el-breadcrumb> -->
    <!-- 头部固定数据 -->
    <div class="statistic-container">
        <div class="statistic-box bg-first">
            <div >
                <div>用户统计</div>
                <div>
                      <el-button type="success" plain size="mini">实时</el-button>
                </div>
            </div>
            <div>13</div>
            <div>当前总用户数量</div>
        </div>
        <div class="statistic-box bg-second">
            <div >
                <div>商品统计</div>
                <div>
                      <el-button type="info" plain size="mini">实时</el-button>
                </div>
            </div>
            <div>925</div>
            <div>当前商品总数量</div>
        </div>
        <div class="statistic-box bg-third">
            <div >
                <div>订单统计</div>
                <div>
                      <el-button type="warning" plain size="mini">实时</el-button>
                </div>
            </div>
            <div>27</div>
            <div>当前总订单数量</div>
        </div>
        <div class="statistic-box bg-fourth">
            <div >
                <div>销售统计</div>
                <div>
                      <el-button type="primary" plain size="mini">实时</el-button>
                </div>
            </div>
            <div>2075</div>
            <div>当前总销售额(元)</div>
        </div>
    </div>

    <!-- echarts -->
    <el-row>
        <el-col :span=12 class="echbox-left">
            <el-card></el-card>
        </el-col>
        <el-col :span=12 class="echbox-rigth">
            <el-card></el-card>
        </el-col>
    </el-row>
  </div>
</template>
<script>
// import * as  echarts from 'echarts'
// import _ from 'lodash'

export default {
    
}
</script>
<style lang="less" scoped>
.statistic-container{
    padding:5px 0;
    display: flex;
    color:white;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
.statistic-box{
    padding: 5px;
    align-items: center;

    border-radius: 5px;
    width: 24%;
    height: 100px;
    box-sizing: border-box;
    div:first-child{
        padding: 5px;
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        font-size: 13px;
    }
    div:nth-child(2){
        text-align: center;
        font-size: 20px;
        font-weight: bold;

    }
    div:nth-child(3){
        font-size: 12px;
    }
}
.bg-first{
    background-color:#409eff ;
}
.bg-second{
    background-color:#e6a23c ;
}
.bg-third{
    background-color:#67c23a ;
}
.bg-fourth{
    background-color:#909399 ;
}
.echbox-left{
    padding-left: 10px;
}
.echbox-right{
    padding-right: 10px;
}
</style>